<script setup>

  const arr = [
    {
      icon:'/static/image/zbxh.png',
      school:'中北大学',
      team:'中北一队',
      captain:'11',
      to:'/pages/work1/zm'
    },
    {
      icon:'/static/image/zbxh.png',
      school:'中北大学',
      team:'中北一队',
      captain:'11',
      to:'/pages/work1/zm'
    },
    {
      icon:'/static/image/zbxh.png',
      school:'中北大学',
      team:'中北一队',
      captain:'11',
      to:'/pages/work1/zm'
    }
  ]
const toNext = (to) =>{
    uni.navigateTo({
     url:to
    })
}

</script>

<template>
  <view>
<!--  头顶蓝条  -->
    <view class="danmubk">
    <view class="danmu">队伍正在招募</view>
    </view>
<!--    搜索框-->
    <view class="search-container">
      <image src="../../static/image/3.4.png" class="search-icon"></image>
      <input type="text" placeholder="请输入中学名次或队长姓名关键词查询" class="ziti"/>
      </view>



<!--招募内容-->
    <view v-for="(item,index) in arr" :key="index" class="zmcontent">
      <view class="df">

          <view class="dd" @click="toNext(item.to)">
            <view class="zs"  >
              <image class="icon" src="/static/image/zbxh.jpeg"></image>
              <text class="title">{{ item.school }}</text>
              <image class="icon1" src="/static/image/zm.png"></image>
              <text class="zs1">招募中</text>
            </view>
          <view class="beauty">
           队长
            <text class="txt1">{{item.captain}}</text>
            <br>
            队伍名称
            <text class="txt2">{{item.team}}</text>
          </view>
        <view class="remind">
         28人已经加入，赶紧报名吧！
       </view>
          </view>


      </view>
      </view>
  </view>

</template>

<style scoped>
.danmubk{
  width: 100%;
  height: 32px;
  opacity: 0.5;
  background: #166AFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dd{
  background:url("../../static/image/bg1.png");
  width: 351px;
  height: 110px;

}
.beauty{
  margin-left:25px;
  width: 108px;
  height: 48px;
  font-weight: 400;
  font-size: 12px;
  color: #212121;
  line-height: 24px;
}
.zs{
  margin:5px 5px;
}

.danmu{
  width: auto;
  height: 17px;
  font-weight: 400;
  font-size: 12px;
  color: black;
  text-align: center;
  position: static;


}
.search-container{
  width: 100%;
  height: 40px;
  background: #FFFFFF;
  box-shadow: 0 2px 5px 0 #E2E4EB;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  margin-top: 10px
}
.search-icon{
  width: 20px;
  height: 20px;
  margin-left: 5px;
}
.ziti{
  display: flex;
  flex:1;
  height: 17px;
  font-weight: 400;
  font-size: 14px;
  color: #333;
  padding-left: 5px;

}
.icon{
  width: 15px;
  height: 15px;
  margin-top: 5px;

}

.df{
  display: flex;
  margin:5px 5px;
}
.title{
  width: 96px;
  height: 22px;
  font-weight: 500;
  font-size: 16px;
  color: #212121;
  text-align: center;
}

.zmcontent{
display: flex;
  justify-content: start;
  align-items: center;
}
.icon1{
  width: 5px;
  height: 5px;
  margin-left: 150px;
}
.zs1{
  width: 36px;
  height: 17px;
  font-weight: 400;
  font-size: 12px;
  color: #166AFF;
  text-align: center;
}
.remind{
  width: 159px;
  height: 17px;
  font-weight: 400;
  font-size: 12px;
  color: #999DA3;
  text-align: center;
  margin-left: 15px;
  margin-top: 2px;
}
</style>